<template>
  <div>
    父级名称：<el-input v-model="item.label" placeholder="默认为0"></el-input>
    名称：<el-input v-model="subitem.label" placeholder="请输入名称"></el-input>
    <p />
    <el-button type="primary" @click="add" round>添加</el-button>
    <el-button type="primary" @click="del" round>删除</el-button>
    <el-cascader-panel
      :options="areaData"
      @change="change"
      @expand-change="parentChange"
    ></el-cascader-panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      item: { value: "", label: "" },
      subitem: { value: "", label: "" },
      areaData: [
        {
          // id
          value: "1",
          label: "天津市",
          level: 0,
          children: [
            {
              value: "11",
              label: "东丽区",
              level: 1,
              children: [
                {
                  value: "111",
                  label: "东软大厦",
                  level: 2,
                },
              ],
            },
          ],
        },
        {
          value: "2",
          label: "河北省",
          level: 0,
          children: [
            {
              value: "21",
              label: "邯郸市",
              level: 1,
              children: [
                {
                  value: "211",
                  label: "工程大学",
                  level: 2,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    parentChange(val) {
    //   this.areaData.find((item) => {
    //     if (val == item.value) {
    //       this.item = item;
    //       console.log(this.item);
    //     }
    //   });
      console.log(val);
    },
    add() {
      if (this.item.level < 2) {
        this.subitem.id = this.subitem + this.count++;
        this.item.children.push(this.subitem);
        this.areaData.find((item) => {
          if (this.item.value == item.value) {
            item = this.item;
            console.log(this.item);
          }
        });
      }
    },
    del() {
      let i = 0;
      this.areaData.findIndex((item, index) => {
        console.log(item);
        console.log(index);
        i = index;
      });
      this.areaData.splice(i, 1);
      console.log("====");
      console.log(this.areaData);
    },
  },
};
</script>

<style>
</style>